<template>
  <div>
    <base-list ref="storehousePlan"
               :condition="condition"
               :datas.sync="storehousePlanType"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               label-width="100px">
        <el-row>
          <el-col :span="6" style="padding-right:10px;">
            <el-row>
              <el-table ref="storehousePlanType"
                        :data="storehousePlanType"
                        border
                        highlight-current-row
                        @current-change="handleCurrentChange">
                <el-table-column label="序号"
                                 type="index"
                                 width="50"></el-table-column>
                <el-table-column prop="stackPlanTypeDesc"
                                 label="仓库策划类型"
                                 width="120"></el-table-column>
                <el-table-column prop="warehouseName"
                                 label="所属仓库"
                                 width="80"></el-table-column>
              </el-table>
            </el-row>
          </el-col>
          <el-col :span="18">
            <el-row style="margin-bottom:10px;">
              <el-button class="danger"
                         plain
                         type="info"
                         icon="el-icon-delete"
                         @click="handleRemove()">删除
              </el-button>
              <el-button
                         type="primary"
                         icon="el-icon-plus"
                         @click="handleAddTable()">增加</el-button>
            </el-row>
            <el-row>
              <el-table ref="stackPlans"
                        :data="stackPlans"
                        border
                        @selection-change="handleSelectionChange">
                <el-table-column type="selection"
                                 width="55">
                </el-table-column>
                <el-table-column label="序号"
                                 min-width="50">
                  <template slot-scope="scope">
                    {{ scope.$index+1 }}
                  </template>
                </el-table-column>
                <el-table-column :key="index"
                                 :label="item.attrName"
                                 min-width="220"
                                 v-for="(item, index) in tableList">
                  <template slot-scope="scope">
                    <el-col :span="12">
                      <el-select v-model="stackPlans[scope.$index].factors[index].operator"
                                 placeholder="请选择"
                                 clearable>
                        <el-option v-for="[key, val] in _dictOperatorType"
                                   :key="key"
                                   :label="val"
                                   :value="key"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="12"
                            v-if="isSelectFn(stackPlans[scope.$index].factors[index].attrCode)">
                      <el-select v-model="stackPlans[scope.$index].factors[index].attrVal"
                                 placeholder="请选择"
                                 clearable>
                        <el-option v-for="[key, val] in _dictTransportModeType"
                                   :key="key"
                                   :label="val"
                                   :value="key"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="12"
                            v-else>
                      <el-input v-model="stackPlans[scope.$index].factors[index].attrVal"></el-input>
                    </el-col>
                  </template>
                </el-table-column>
                <el-table-column prop="priority"
                                 label="优先级"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.priority"
                               placeholder="请选择"
                               clearable>
                      <el-option v-for="[key, val] in _dictPriorityType"
                                 :key="key"
                                 :label="val"
                                 :value="key"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="roomCode"
                                 label="库房"
                                 min-width="150">
                  <template slot-scope="scope">
                    <select-room v-model="scope.row.roomCode"
                                 @selectId="v=>scope.row.roomId=v"
                                 @selectName="v=>scope.row.roomName=v"
                                 :row="currentRow"
                                 :name="scope.row.roomName"></select-room>
                  </template>
                </el-table-column>
                <el-table-column prop="startSpan"
                                 label="开始跨数"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.startSpan"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="endSpan"
                                 label="结束跨数"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.endSpan"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="startAula"
                                 label="开始间数"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.startAula"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="endAula"
                                 label="结束间数"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.endAula"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="upperLimitType"
                                 label="限制因素"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.upperLimitType"
                               placeholder="请选择"
                               clearable>
                      <el-option v-for="[key, val] in _dictLimitFactor"
                                 :key="key"
                                 :label="val"
                                 :value="key"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="upperLimitValue"
                                 label="限制重量（t）"
                                 min-width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.upperLimitValue"
                              :disabled="scope.row.upperLimitType==='W'"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="remark1"
                                 label="已放重量（t）"
                                 min-width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.remark1"
                              disabled></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="remark2"
                                 label="可放重量（t）"
                                 min-width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.remark2"
                              disabled></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="upperLimitValue"
                                 label="限制件数"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.upperLimitValue"
                              :disabled="scope.row.upperLimitType==='N'"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="remark4"
                                 label="已放件数"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.remark4"
                              disabled></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="remark5"
                                 label="可放件数"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.remark15"
                              disabled></el-input>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="remark"
                                 label="可放层高"
                                 min-width="100">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.endParkingLot"></el-input>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-row>
            <div style="text-align:center;margin-top:30px">
              <el-button @click="dialogForm = false">取 消</el-button>
              <el-button type="primary"
                         @click="handleSubmit"
                         :loading="$store.getters.loadingBtn">
                保 存
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </base-list>
    <div style="text-align:center">
      <el-button plain
                 type="info"
                 @click="handleRouterPush({path: '/goods/storehouse',name: '仓库管理'})">返回</el-button>
    </div>
  </div>
</template>

<script>
import {
  getStorehousePlanList,
  addStorehousePlan,
  deleteStorehousePlan
} from '@/api/storehousePlan/storehousePlan' //右边表格
import {
  getStorehousePlanTypeList,
  getPrincipleList
} from '@/api/storehousePlanType/storehousePlanType' //左边表格
import { getStorageSetList } from '@/api/storageSet/storageSet' //库房来源于库房管理
import selectRoom from '@/components/select/selectRoom' //库房选择框
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import autoSearchVehicleNo from '@/components/autocomplete/autoSearchVehicleNo'

export default {
  name: 'storehousePlan',
  components: {
    selectRoom,
    autoSearchOrg,
    autoSearchVehicleNo,
    autoSearchDic
  },
  data() {
    return {
      condition: {}, // 查询条件
      storehousePlanType: [], // 左边table数组
      stackPlans: [], // 右边table数组
      pageSearch: getStorehousePlanTypeList, // 分页查询api接口
      id: '',
      currentRow: null,
      roomList: [], // 库房
      multipleSelection: [],
      tableList: null, //动态表头
      selectList: null,
      disabled: false
    }
  },
  mounted() {
    getPrincipleList().then(res => {
      this.selectList = res.data.aaData
    })
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    handleAddTable() {
      let row = this.currentRow
      const defaultData = {
        roomId: null, //库房ID
        roomCode: '', //库房代码
        roomName: '', //库房名称
        startSpan: '', //开始跨
        endSpan: '', //结束跨
        startAula: '', //开始间
        endAula: '', //结束间
        upperLimitType: '', //上限类型代码
        uppperLimitTypeDesc: '', //上限类型描述
        priority: null, //优先级
        factors: []
      }
      for (let i = 0; i < this.tableList.length; i++) {
        const typeVal = this.isSelectFn(this.tableList[i].attrCode)
          ? 'SELECT'
          : 'TEXT'
        defaultData.factors.push({
          sortNo: this.tableList[i].sortNo,
          attrName: this.tableList[i].attrName,
          attrCode: this.tableList[i].attrCode,
          attrVal: '', //因素值
          operator: '', //操作符
          displayType: typeVal
        })
      }
      this.stackPlans.push(defaultData)
    },
    handleRemove(index) {
      if (this.multipleSelection.length < 1) {
        this.$message({ message: '至少需要一条数据!', type: 'error' })
      } else {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          const index = this.stackPlans.indexOf(this.multipleSelection[i])
          this.stackPlans.splice(index, 1)
        }
      }
    },
    loadData() {
      this.$refs.storehousePlan.loadData()
    },
    handleCurrentChange(row) {
      this.currentRow = row
      this.tableList = row.factors
      getStorehousePlanList({
        'search_EQ_warehouse.id': row.warehouseId,
        search_EQ_stackPlanType: row.stackPlanType,
        search_EQ_orgId: row.orgId
      }).then(res => {
        this.stackPlans = res.data.aaData
      })
    },
    //select与input框切换
    isSelectFn(val) {
      for (var i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].attrCode === val) {
          return this.selectList[i].displayType === 'SELECT'
        }
      }
      return false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSubmit() {
      let createData = Object.assign({}, this.currentRow)
      delete createData.factors
      let createStackPlans = JSON.parse(JSON.stringify(this.stackPlans))
      createData.stackPlans = createStackPlans
      // createData.deptId = 1
      // createData.deptName = '信息部'
      addStorehousePlan(createData).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
      })
    },
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    }
  }
}
</script>

<style scoped>
el-table-column {
  text-align: center;
}
</style>
